<template>
  <div class="popular">
    <div class="content">
      <div class="title">/商品受欢迎排行表</div>
      <div class="search">
        <el-input v-model="search" placeholder="输入商品名称关键字搜索"/>
        <el-button type="primary" @click="submitSearch">查询</el-button>
      </div>
      <el-table
        :data="popularList"
        stripe
        border>

        <el-table-column
          type="index"
          :index="1"
          label="排名"
          width="80"
          align="center">
        </el-table-column>

        <el-table-column
          prop="type"
          label="类型"
          align="center">
        </el-table-column>

        <el-table-column
          prop="name"
          label="名称"
          align="center"
          width="200"
          :show-overflow-tooltip="true">
        </el-table-column>

        <el-table-column
          prop="price"
          label="现销售价"
          align="center">
        </el-table-column>

        <el-table-column
          prop="orderNum"
          label="销售量"
          align="center">
        </el-table-column>

        <el-table-column
          prop="sum"
          label="交易金额"
          align="center">
        </el-table-column>

      </el-table>
      <div class="page">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-count="totalPage"
          @current-change="changePage"
          ref="pagination">
        </el-pagination>
      </div>

    </div>
  </div>
</template>

<script>
  export default {
    name: 'Popular',
    data() {
      return {
        search:'',
        popularList:[],
        totalPage:null
      }
    },
    created() {
      this.getPopularList()
    },
    watch:{
      search(newVal, oldVal) {
        if (oldVal.lendth > 0 || newVal == '') { //all
          this.getPopularList();
          this.$refs.pagination.internalCurrentPage = 1;
        }
      }
    },
    methods: {
      submitSearch(page){
        if(!this.search){
          this.$message.error("请输入商品关键字搜索！");
          return
        }
        let currentPage = null;
        if(typeof(page)=="object" || !page){
          this.$refs.pagination.internalCurrentPage = 1;
          currentPage=1;
        }else{
          currentPage = page;
        }
        let url = '/api/product/popular/search?key='+this.search+'&&page='+currentPage;
        this.axios.get(url).then((res=>{
          if(res.data.errCode==9){
            this.totalPage =null;
            this.popularList = null;
          }else if(res.data.errCode==0){
            this.totalPage = res.data.data.total_page;
            this.popularList = res.data.data.result.map((val,index,arr)=>{
              return {
                id:val.product_id,
                type:val.type_name,
                name:val.name,
                price:'￥'+val.price,
                orderNum:val.total,
                sum:'￥'+val.price*val.total
              }
            })
          }
        })).catch(error=>{
          console.log(error)
        });
      },
      getPopularList(page){
        let url = page?'/api/product/popular?page='+page:'/api/product/popular';
        this.axios.get(url).then((res=>{
          if(res.data.errCode==0){
            this.totalPage = res.data.result.total_page;
            this.popularList = res.data.result.list.map((val,index,arr)=>{
              return {
                id:val.id,
                type:val.type_name,
                name:val.name,
                price:'￥'+val.price,
                orderNum:val.total,
                sum:'￥'+val.price*val.total
              }
            })
          }else if(res.data.errCode==9){
            this.totalPage = null;
            this.popularList = [];
          }
        })).catch(error=>{
          console.log(error)
        });
      },
      changePage(currentPage){
        if(this.search){
          this.submitSearch(currentPage)
        }else{
          this.getPopularList(currentPage);
        }
      }
    }
  }
</script>
<style lang="less" scoped>
  .popular{
    padding: 0 20px;
    .content{
      .title{
        width: 100%;
        height: 60px;
        line-height: 60px;
      }
      .search{
        margin-bottom: 20px;
        display: flex;
        .el-input{
          width: 300px;
          margin-right: 10px;
        }
      }
    }
    .page{
      margin-top: 20px;
      display: flex;
      justify-content: flex-end;
    }
  }
</style>
